<template>
  <basic-card :title="$t('menu.server_settings')" :iconClass="'el-icon-eleme'">
    <el-form
      label-width="120px"
      label-position="left"
      :model="formData"
      :rules="formRules"
      v-loading="loading"
      style="margin-top: 30px"
    >
      <el-row
        style="width: 780px; margin-left: auto; margin-right: auto;"
      >
        <el-col :span="24">
          <el-form-item :label="$t('service_config.ip_address')" prop="ip_address">
            <el-row :gutter="20">
              <el-col :span="9">
                <basic-input v-model="formData.ip_address" v-if="editabled" @change="checkStatus = CHECK_STATUS.no_check">
                  <template #append>
                    <el-button
                      type="primary"
                      :disabled="loading"
                      @click="checkIp"
                      v-if="checkStatus === CHECK_STATUS.no_check"
                    >
                      {{ $t("service_config.connect_test") }}
                    </el-button>
                    <span class="item" v-if="checkStatus === CHECK_STATUS.checking">
                      <i class="el-icon-loading"></i>
                      {{ $t("service_config.checking") }}
                    </span>
                    <span class="item" v-if="checkStatus === CHECK_STATUS.normal">
                      <i class="el-icon-check"></i>
                      {{ $t("service_config.normal") }}
                    </span>
                    <span class="item" v-if="checkStatus === CHECK_STATUS.unconnect">
                      <i class="el-icon-close"></i>
                      {{ $t("service_config.unconnect") }}
                    </span>
                  </template>
                </basic-input>
                <span v-else>{{ formData.ip_address || $t('common.no_option') }}</span>
              </el-col>
              <el-col :span="14">
                <el-alert
                  :title="$t('service_config.ip_address_help_message')"
                  :closable="false"
                  type="info">
                </el-alert>
              </el-col>
            </el-row>
          </el-form-item>
          <el-divider :style="'margin: 0px;'"></el-divider>
          <el-form-item :label="$t('service_config.send_port')" prop="send_port">
            <el-row :gutter="20">
              <el-col :span="9">
                <basic-input v-model="formData.send_port" v-if="editabled"></basic-input>
                <span v-else>{{ formData.send_port || $t('common.no_option') }}</span>
              </el-col>
              <el-col :span="14">
                <el-alert
                  :title="$t('service_config.send_port_help_message')"
                  :closable="false"
                  type="info">
                </el-alert>
              </el-col>
            </el-row>
          </el-form-item>
          <el-divider></el-divider>
<!--          <el-form-item :label="$t('service_config.send_person')" prop="send_person">-->
<!--            <el-row :gutter="20">-->
<!--              <el-col :span="9">-->
<!--                <basic-input v-model="formData.send_person" v-if="editabled"></basic-input>-->
<!--                <span v-else>{{ formData.send_person || $t('common.no_option') }}</span>-->
<!--              </el-col>-->
<!--              <el-col :span="14">-->
<!--                <el-alert-->
<!--                  :title="$t('service_config.send_person_help_message')"-->
<!--                  :closable="false"-->
<!--                  type="info">-->
<!--                </el-alert>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-form-item>-->
<!--          <el-divider></el-divider>-->
<!--          <el-form-item :label="$t('service_config.password')" prop="password">-->
<!--            <el-row :gutter="20">-->
<!--              <el-col :span="9">-->
<!--                <basic-input v-model="formData.password" v-if="editabled"></basic-input>-->
<!--                <span v-else>{{ formData.password || $t('common.no_option') }}</span>-->
<!--              </el-col>-->
<!--              <el-col :span="14">-->
<!--                <el-alert-->
<!--                  :title="$t('service_config.password_help_message')"-->
<!--                  :closable="false"-->
<!--                  type="info">-->
<!--                </el-alert>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-form-item>-->
<!--          <el-divider></el-divider>-->
<!--          <el-form-item :label="$t('service_config.remote_path')" prop="remote_path">-->
<!--            <el-row :gutter="20">-->
<!--              <el-col :span="9">-->
<!--                <basic-input v-model="formData.remote_path" v-if="editabled"></basic-input>-->
<!--                <span v-else>{{ formData.remote_path || $t('common.no_option') }}</span>-->
<!--              </el-col>-->
<!--              <el-col :span="14">-->
<!--                <el-alert-->
<!--                  :title="$t('service_config.remote_path_help_message')"-->
<!--                  :closable="false"-->
<!--                  type="info">-->
<!--                </el-alert>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </el-form-item>-->
<!--          <el-divider></el-divider>-->
        </el-col>
        <el-col :span="24" v-if="editabled" style="text-align: center;">
          <el-button @click="editabled = false">{{ $t("botton.cancel") }}</el-button>
          <el-button type="primary" @click="submit" :disabled="loading">{{
            $t("botton.save")
          }}</el-button>
        </el-col>
        <el-col :span="24" v-else style="text-align: center;">
          <el-button type="primary" @click="editabled = true">{{
            $t("botton.edit")
          }}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </basic-card>
</template>
<script lang="ts">
import Vue from "vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicInput from "@/components/Basic/Form/BasicInput.vue";

const CHECK_STATUS = {
  normal: 1,
  no_check: 2,
  checking: 3,
  unconnect: 4
};

export default Vue.extend({
  components: { BasicCard, BasicInput },
  data() {
    return {
      loading: false,
      editabled: false,
      checkStatus: CHECK_STATUS.no_check,
      formData: {
        ip_address: "",
        send_port: "",
        send_person: "",
        password: "",
        remote_path: ""
      },
      formRules: {
      },
    };
  },
  computed: {
    CHECK_STATUS() {
      return CHECK_STATUS;
    }
  },
  mounted() {
    this.getSetting();
  },
  methods: {
    getSetting() {
      // this.$mainApi.serviceConfigApi
      //   .getById(this.$config.SERVICE_CONFIG_ID.monitor)
      //   .then((res: any) => {
      //     if (!res.data) return;
      //     this.formData.ip_address = res.data.ipAddress;
      //     this.formData.send_port = res.data.sendPort;
      //     this.formData.send_person = res.data.sendPerson;
      //     this.formData.password = res.data.password;
      //     this.formData.remote_path = res.data.remotePath;
      //   });
    },
    submit() {
      this.loading = true;
      // this.$mainApi.serviceConfigApi.putById(
      //   this.$config.SERVICE_CONFIG_ID.monitor,
      //   {
      //     ipAddress: this.formData.ip_address,
      //     sendPort: parseInt(this.formData.send_port),
      //     sendPerson: this.formData.send_person,
      //     password: this.formData.password,
      //     remotePath: this.formData.remote_path,
      //   }
      // ).then(() => {
      //   this.editabled = false;
      // }).finally(() => {
      //   this.loading = false;
      // });
    },
    close() {
      this.$router.push("/broadcast/list");
    },
    checkIp() {
      if (!this.formData.ip_address) {
        this.$message.warning(this.$t("service_config.ip_address_required_massage").toString());
        return;
      }
      this.checkStatus = CHECK_STATUS.checking;
      // this.$mainApi.serviceConfigApi.checkIp(this.formData.ip_address).then((res: any) => {
      //   if (res.data) {
      //     this.checkStatus = CHECK_STATUS.normal;
      //   } else {
      //     this.checkStatus = CHECK_STATUS.unconnect;
      //   }
      // })
    }
  },
});
</script>
<style lang="scss" scoped>
</style>
